import React from 'react'
import { Color } from '../model/color'

interface Props{
    color:Color;
    onColorUpdated:(color:Color)=>void
}
const updateColor=
    (props:Props,colorId:keyof Color)=>
        (value:any)=>{
            props.onColorUpdated({
                ...props.color,
                [colorId]:value
            })
        }
const ColorPicker:React.FC<Props> = (props) => {
    // updateColor("red")
    return (
        <div>
            <ColorSliderComponents
                value={props.color.red}
                onValueUpdated={updateColor(props,'red')}
            />
            <br />
            <ColorSliderComponents
                value={props.color.green}
                onValueUpdated={updateColor(props,'green')}
            />
            <br />
            <ColorSliderComponents
                value={props.color.blue}
                onValueUpdated={updateColor(props,'blue')}
            />
        </div>
            
     
    )
}

interface PropsColorSlider{
    value:number;
    onValueUpdated:(newValue:number)=>void
}
const ColorSliderComponents:React.FC<PropsColorSlider> = (props)=>{
    return(
        <div>
            <input type="range" 
                min="0"
                max="255"
                value={props.value}
                onChange={(e)=>props.onValueUpdated(+e.target.value)}
            />
            {props.value}
        </div>
    )
}
export default ColorPicker
